Framework7 এর Dynamic Routing এবং Route Parameters ফিচার আপনাকে ডাইনামিক পেজ নেভিগেশন এবং পৃষ্ঠার কনটেন্ট পরিবর্তনের জন্য অত্যন্ত কার্যকর টুল প্রদান করে। এটি ডেভেলপারদের সহজেই ডাইনামিক এবং রিয়েল-টাইম পৃষ্ঠাগুলো পরিচালনা করতে সক্ষম করে।
Dynamic Routing কী?
Dynamic Routing এমন একটি পদ্ধতি যেখানে URL এর একটি অংশ ডাইনামিক বা পরিবর্তনশীল থাকে। Framework7 এই পদ্ধতিতে :parameter চিহ্ন ব্যবহার করে ডাইনামিক পাথ তৈরি করতে দেয়। এটি ব্যবহার করে পৃষ্ঠাগুলোর মধ্যে ডেটা পাস এবং ডাইনামিক পেজ লোড করা সম্ভব।
Route Parameters কী?
Route Parameters হলো ডাইনামিক URL পাথের অংশ যা :parameter চিহ্নের মাধ্যমে ডিফাইন করা হয়। এটি ডেটা পাস করার জন্য URL এর অংশ হিসেবে ব্যবহৃত হয় এবং Framework7 এর রাউটিং সিস্টেম সেই ডেটা অ্যাক্সেস করতে সক্ষম হয়।
উদাহরণ:
একটি ডাইনামিক রাউট :id প্যারামিটার ব্যবহার করে এই রকম হতে পারে:
{
path: '/user/:id/',
url: './pages/user.html',
}
উপরে, :id একটি ডাইনামিক প্যারামিটার যা প্রতিবার আলাদা ডেটা পাস করতে ব্যবহৃত হয়।
Dynamic Routing এবং Route Parameters কনফিগার করা
স্টেপ ১: রাউট কনফিগারেশন
app.js ফাইলে Framework7 রাউটিং সিস্টেমে ডাইনামিক রাউট যোগ করুন।
var app = new Framework7({
root: '#app',
routes: [
{
path: '/user/:id/',
url: './pages/user.html',
},
],
});
স্টেপ ২: ডাইনামিক পেজ তৈরি
user.html নামে একটি পৃষ্ঠা তৈরি করুন এবং ডাইনামিক ডেটা দেখানোর জন্য Framework7 এর route অবজেক্ট ব্যবহার করুন।
<div class="page" data-name="user">
<div class="navbar">
<div class="navbar-inner">
<div class="title">User Details</div>
</div>
</div>
<div class="page-content">
<p>User ID: {{route.params.id}}</p>
</div>
</div>
এখানে {{route.params.id}} ডাইনামিক প্যারামিটার থেকে id মান দেখাবে।
Route Parameters থেকে ডেটা অ্যাক্সেস
Framework7 এর রাউটিং সিস্টেমে, ডাইনামিক প্যারামিটারগুলো route.params অবজেক্ট থেকে অ্যাক্সেস করা যায়।
উদাহরণ:
URL: /user/123/
route.params.id হবে 123।
Route Parameters ব্যবহার করে ডেটা লোড করা
স্টেপ ১: API বা ডেটাবেস থেকে ডেটা লোড
ডাইনামিক রাউটের ভিত্তিতে API থেকে ডেটা লোড করতে on ইভেন্ট ব্যবহার করুন।
{
path: '/user/:id/',
async: function (routeTo, routeFrom, resolve, reject) {
var userId = routeTo.params.id;
// API থেকে ডেটা ফেচ করা
app.request.json('https://example.com/api/users/' + userId, function (data) {
resolve(
{
componentUrl: './pages/user.html',
},
{
context: {
user: data,
},
}
);
});
},
}
স্টেপ ২: ডাইনামিক ডেটা পেজে দেখানো
user.html পৃষ্ঠায় ডাইনামিক ডেটা দেখানোর জন্য context ব্যবহার করুন:
<div class="page" data-name="user">
<div class="navbar">
<div class="navbar-inner">
<div class="title">{{user.name}}</div>
</div>
</div>
<div class="page-content">
<p>User ID: {{user.id}}</p>
<p>Email: {{user.email}}</p>
</div>
</div>
Query Parameters এবং Dynamic Routing এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Dynamic Routing | Query Parameters |
|---|---|---|
| সংজ্ঞা | URL এর অংশ ডাইনামিক থাকে। | URL এর শেষে কুয়েরি স্ট্রিং যোগ করা হয়। |
| ব্যবহার | /user/:id/ | /user/?id=123 |
| অ্যাক্সেস পদ্ধতি | route.params.id | route.query.id |
| প্রধান সুবিধা | পরিষ্কার এবং সহজভাবে পাথ ম্যানেজ করা যায়। | একাধিক ডেটা সহজে পাস করা যায়। |
Framework7 এর Dynamic Routing এবং Route Parameters ডাইনামিক অ্যাপ্লিকেশন তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ডেভেলপারদের ডাইনামিক পেজ তৈরি, ডেটা লোড এবং URL ভিত্তিক পৃষ্ঠাগুলোর কন্টেন্ট পরিবর্তনের জন্য কার্যকর সমাধান প্রদান করে। Dynamic Routing এর মাধ্যমে অ্যাপ্লিকেশন আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।
Read more
